<template>
	<div>
		<a-card :borderd="false" class="mb-2">
			<a-row :gutter="8">
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.groupId" placeholder="请选择端口池分组"
							  style="width:100%"
							  allow-clear>
						<a-select-option v-for="item in config.portGroupList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="2">
					<a-space>
						<a-button
							@click="tableRef.refresh()">搜索
						</a-button>
						<a-button @click="handleCreate" type="primary">新增
						</a-button>
						<!--						<a-button @click="handleCreate">删除-->
						<!--						</a-button>-->
						<!--						<button-popover class="filter-item" style="margin-left: 10px;" size="medium"-->
						<!--										icon="el-icon-delete"-->
						<!--										:buttonText="$t('批量删除')" :disabled="checkBoxData.length == 0"-->
						<!--										@handleCommitClick="handleDeleteBatch"/>-->
					</a-space>
				</a-col>
			</a-row>
		</a-card>

		<a-card>
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>

		</a-card>

		<a-modal v-model:open="config.dialogFormVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogFormVisible = false" @ok="saveData">
			<a-form :rules="config.rules" ref="dataForm" :model="config.temp"
			>
				<a-form-item label="端口" name="port">
					<a-input placeholder="端口或者区间" v-model:value="config.temp.port"
							 :disabled="config.dialogStatus == 'update'"></a-input>
				</a-form-item>

				<a-form-item label="分组" name="group">
					<a-select v-model:value="config.temp.groupId">
						<a-select-option v-for="item in config.portGroupList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>

		<a-modal v-model:open="config.dialogPvVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogPvVisible = false" @ok="config.dialogPvVisible = false">
			<el-table :data="config.pvData" border fit highlight-current-row style="width: 100%">
				<el-table-column prop="key" label="Channel"></el-table-column>
				<el-table-column prop="pv" label="Pv"></el-table-column>
			</el-table>
		</a-modal>

	</div>
</template>

<script setup>
import portPoolApi from '@/api/portPool/portPoolApi.js'
import portGroupApi from '@/api/portGroup/portGroupApi.js'


const tableRef = ref();
const dataForm = ref();

const config = ref({
	tableKey: 0,
	list: null,
	total: null,
	listLoading: true,
	listQuery: {
		groupId: undefined
	},
	importanceOptions: [1, 2, 3],
	showReviewer: false,
	temp: {
		groupId: 1,
		id: undefined,
		importance: 1,
		remark: '',
		timestamp: new Date(),
		title: '',
		type: '',
		status: 'published'
	},
	dialogFormVisible: false,
	dialogStatus: '',
	textMap: {
		update: '编辑',
		create: '新建'
	},
	portGroupList: [],
	dialogPvVisible: false,
	pvData: [],
	rules: {
		port: [{required: true, message: '端口必填', trigger: 'blur'}]
	},
	downloadLoading: false,
	checkBoxData: [], //表单勾选的行
})

const columns = ref([
	{
		title: 'id',
		key: 'id',
		dataIndex: 'id',
		ellipsis: true,
	},
	{
		title: '端口号',
		key: 'port',
		dataIndex: 'port',
		ellipsis: true,
	},
	{
		title: '分组名称',
		key: 'groupName',
		dataIndex: 'groupName',
		ellipsis: true,
	},
	{
		title: '创建时间',
		key: 'createTime',
		dataIndex: 'createTime',
		ellipsis: true,
	},
	{
		title: '修改时间',
		key: 'modifyTime',
		dataIndex: 'modifyTime',
		ellipsis: true,
	},
	{
		title: '启停状态',
		key: 'enable',
		dataIndex: 'enable',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '启用'
			},
			{
				key: '2',
				value: '停用'
			}
		]
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 260,
		fixed: 'right',
		buttonList: [
			{
				type: "primary",
				click: (field, record) => {
					handleUpdate(record)
				},
				render: (record) => {
					return "编辑";
				}
			},
			{
				click: (field, record) => {
					handleModifyStatus(record, record.enable == 1 ? 2 : 1);
				},
				render: (record) => {
					return record.enable == 1 ? "停用" : "启用";
				}
			},
			{
				click: (field, record) => {
					handleDelete(record)
				},
				render: (record) => {
					return "删除";
				}
			}
		]
	}
])

onMounted(() => {
	getList()
	getPortGroupList()
})
const getList = async () => {
	let response = await portPoolApi.fetchList(config.value.listQuery);
	return response;
}
const getPortGroupList = async () => {
	let response = await portGroupApi.portGroupList();
	config.value.portGroupList = response
}
const handleModifyStatus = async (row, enable) => {
	await portPoolApi.updateEnableStatus(row.id, enable);
	tableRef.value.refresh()
}
const resetTemp = () => {
	config.value.temp = {
		id: undefined,
		importance: 1,
		remark: '',
		timestamp: new Date(),
		title: '',
		status: 'published',
		type: '',
		groupId: 1
	}
}
const handleCreate =
	() => {
		resetTemp()
		config.value.dialogStatus = 'create'
		config.value.dialogFormVisible = true
		config.value.temp.groupId = 1
		// this.$nextTick(() => {
		//   this.$refs['dataForm'].clearValidate()
		// })
	}


const saveData = async () => {
	let b = await dataForm.value.validate();
	if (!b) {
		return
	}
	if (config.value.dialogStatus == 'create') {
		await createData();
	} else {
		await updateData();
	}

}
const createData =
	async () => {
		await portPoolApi.createPortPool(config.value.temp);
		config.value.dialogFormVisible = false
		tableRef.value.refresh()
	}
const handleUpdate =
	(row) => {
		config.value.temp = Object.assign({}, row) // copy obj
		config.value.temp.timestamp = new Date(config.value.temp.timestamp)
		config.value.dialogStatus = 'update'
		config.value.dialogFormVisible = true
		dataForm.value.clearValidate()
	}
const updateData =
	async () => {
		const tempData = Object.assign({}, config.value.temp)
		await portPoolApi.updatePortPool(tempData);

		config.value.dialogFormVisible = false
		tableRef.value.refresh()
	}

const handleDelete = async (row) => {
	await portPoolApi.deletePortPool(row.id);
	tableRef.value.refresh()
}


</script>
